<template>
  <!--添加分类-->
  <el-dialog
      width="30%"
      :visible="addDishClassificationVisual"
      title="分类管理">
    <!--内层添加分类的dialog-->
    <el-dialog
        width="30%"
        title="添加分类"
        :visible.sync="showAddCategoryDialog"
        append-to-body @close="addCategoryClose">
      <el-form
          :model="addCategoryForm"
          :rules="addCategoryFormRules"
          ref="addCategoryRef"
          label-width="100px"
          class="demo-ruleForm">
        <el-form-item label="分类名称" prop="categoryName">
          <el-input v-model="addCategoryForm.categoryName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
                <el-button @click="showAddCategoryDialog=false">取 消</el-button>
                <el-button type="primary" @click="addCategory">确 定</el-button>
            </span>
    </el-dialog>
    <span>所有分类：</span>
    <el-tag
        closable
        class="categoryTag"
        v-for="category in categoryList"
        @close="deleteCategory(category.cid)">
      {{category.categoryName}}
    </el-tag>

    <span slot="footer" class="dialog-footer">
                <el-button
                    type="warning"
                    @click="showAddCategoryDialog=true">添加分类</el-button>
                <el-button @click="addDishClassificationVisual=false">取 消</el-button>
                <el-button type="primary" @click="addDishClassificationVisual=false">确 定</el-button>
            </span>
  </el-dialog>
</template>

<script>
export default {
  name: "AddDishClassification",
  data(){
    return{
      addDishClassificationVisual:false,
      //分类列表
      categoryList:[],
      //添加分类窗口
      showAddCategoryDialog:false,
      //添加分类表单
      addCategoryForm:{categoryName:''},
      //表单规则
      addCategoryFormRules:{
        categoryName:[{ required: true, message: '请输入分类名', trigger: 'blur' }]
      }

    }
  },
  methods:{
    //删除图书分类
    deleteCategory(cid){
      this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const {data:res}=await this.$http.delete("/category/deleteCategory/"+cid)
        if (res.status!==200)return this.$message.error("删除图书分类失败！")
        this.$message.success("删除图书分类成功！")
        await this.getCategoryList();
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //查询所有分类信息
    async getCategoryList(){
      const {data:res}=await this.$http.get("/category/findCategorys")
      if (res.status!=200)return this.$message.error("查询分类信息失败")
      this.categoryList=res.data
    },
    //添加分类窗口关闭时触发
    addCategoryClose(){
      this.$refs.addCategoryRef.resetFields()
    },
    //添加图书分类
    async addCategory(){
      const{data:res}=await  this.$http.post("/category/addCategory",this.addCategoryForm);
      if (res.status!=200)return this.$message.error("添加分类失败");
      this.$message.success("添加图书分类成功");
      this.showAddCategoryDialog=false
      await this.getCategoryList();
    },
    //总线回调函数
    showDialog(status){
      this.addDishClassificationVisual=status;
    }
  },
  mounted() {
    this.$bus.$on("addDishClassification",this.showDialog);
    this.getCategoryList();
  }
}
</script>

<style scoped>
.categoryTag{
  margin-top: 10px;
  margin-left: 15px;
}
</style>
